import React from 'react';
import { connect } from 'react-redux'
import { messages } from "share/common";
import { Alert, Divider, Row, Col, Popover, Icon } from "antd"

import Condition from 'components/condition'
const { If, Else } = Condition;

import 'styles/expense-report/components/expense-detail-alert.scss'

class ExpenseDetailAlert extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    }
  }

  componentDidMount() {
    this.sortWarningList(this.props.warningList)
  }

  componentWillReceiveProps(nextProps) {
    this.sortWarningList(nextProps.warningList)
  }

  sortWarningList = (warningList) => {
    warningList && warningList[0] && warningList // 按type排序
      .sort((a, b) => {
        return b.type - a.type;
      });
    let arr = [];
    // 前端隐藏 需要人工审核 这个 标签
    warningList && warningList.map(item => {
      if (item.externalPropertyName !== 'CREDIT_SPOT_CHECK') {
        arr.push(item)
      }
    })
    this.setState({ list: arr || [] });
  };

  handleExpand = (index ,isExpand) => {
    let { list } = this.state;
    list[index].isExpand = isExpand;
    this.setState({ list })
  };

  renderMessage = (message, type, isExpand, index) => {
    let messageList = message.split('1024bugfix'); //1024bugfix 多个message时的分隔符
    return (
      <Row>
        {messageList.map((str, strIndex) => {
          return (
            <If value={isExpand || (!isExpand && strIndex === 0)}>
              <Col className="message-row" span={messageList.length > 1 ? 21 : 24}>
                <Popover placement="topLeft" content={str} overlayStyle={{ maxWidth: 800 }}>
                  <Divider type="vertical" className={`message-row-divider divider-${type}`}/>{str}
                </Popover>
              </Col>
            </If>
          )
        })}
        <If value={messageList.length > 1}>
          <Col span={3} className="button-expand">
            <Condition>
              <If value={isExpand}>
                <a onClick={() => this.handleExpand(index, false)}>{messages('common.fold')/*收起*/} <Icon type="up" /></a>
              </If>
              <Else>
                <a onClick={() => this.handleExpand(index, true)}>{messages('expense-parent-report.key167')/*查看更多*/} <Icon type="down" /></a>
              </Else>
            </Condition>
          </Col>
        </If>
      </Row>
    )
  };

  render() {
    const { noPrint } = this.props;
    const { list } = this.state;
    return (
      <div className="expense-detail-alert">
        {noPrint && <Alert message={messages('common.print.require')} type='info' showIcon className="show-alert"/>}
        {list.map((item, index) => (
          <Alert key={index}
                 type={item.type === 0 ? 'warning' : 'error'}
                 message={item.title}
                 description={
                   item.message ?
                     this.renderMessage(item.message, item.type === 0 ? 'warning' : 'error', item.isExpand, index) :
                     undefined
                 }
                 className="show-alert"
                 showIcon
          />
        ))}
      </div>
    )
  }
}

ExpenseDetailAlert.propsType = {
  noPrint: React.PropTypes.bool, //是否免打印
  warningList: React.PropTypes.array,
};

ExpenseDetailAlert.defaultProps = {
  noPrint: false,
  warningList: [],
};

function mapStateToProps(state) {
  return { }
}

export default connect(mapStateToProps)(ExpenseDetailAlert)
